<template>
    <div id="index">
        <!-- 轮播图 -->
        <cube-slide ref="slide" :data="slide" @change="changePage">
            <cube-slide-item v-for="(item, index) in slide" :key="index" @click.native="clickHandler($event,item, index)">
                <a :href="item.url">
                    <img class="banner" :src="item.image">
                </a>
            </cube-slide-item>
        </cube-slide>
        <!-- 滚动分类 -->
        <cube-slide ref="slideLists" :auto-play="false" :showDots="false" :data="lists">
            <cube-slide-item v-for="(item, index) in lists" :key="index">
                <ul class="listul">
                    <li class="listli" v-for="(item1,index) in item" :key="index">
                        <a :href="item1.url">
                            <img :src="item1.image" alt="">
                            <p>{{item1.label}}</p>
                        </a>
                    </li>
                </ul>
            </cube-slide-item>
        </cube-slide>
    </div>
</template>
<script>
export default {
    name:'Index',
    data() {
        return {
            slide:[],//轮播图数据
            lists:[],//滚动分类数据
        }
    },
    async created() {
        try {
            const slide=await this.$http.get('/api/banner')
            this.slide=slide.data
            console.log(this.slide)
            const lists=await this.$http.get('/api/rollingList')
            this.lists=lists.data
            console.log(this.lists)
        } catch (error) {
            console.log(error)
        }
    },
    mounted() {
        
    },
    methods: {
        // page改变
        changePage(current){
            // console.log(current)
        },
        // 点击图片
        clickHandler(e,item, index){
            // e.preventDefault();
            console.log(item)
        }
    },
}
</script>
<style lang="stylus" scoped>
.banner{
    display block
    height 175px
    width 100%
}
.listul{
    display flex
    flex-wrap wrap
}
.listli{
    width 20%
    justify-content center
    text-align center
    img{
        width 35px
        height 35px
        border-radius 50%
        padding 5px 0
    }
    p{
        font-size 14px
        padding-bottom 10px
    }
}
</style>